<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <!-- 搜索区域 -->
    <view class="search-box">
      <uni-search-bar 
        v-model="searchValue" 
        placeholder="搜索题库" 
        @confirm="handleSearch"
        @input="handleSearchInput"
        radius="100"
        cancelButton="none"
      />
    </view>

    <!-- 公共课题库区域 -->
    <view class="section">
      <view class="section-title">
        <text class="title-icon">▼</text>
        <text class="title-text">公共课题库</text>
      </view>
      <view class="card-grid">
        <view v-for="(item, index) in commonCourses" 
              :key="index" 
              class="card" 
              :style="{ backgroundColor: item.bgColor }" 
              @tap="handleCard(item)">
          <view class="card-content">
            <text class="card-title">{{ item.title }}</text>
            <text class="card-desc">{{ item.desc }}</text>
          </view>
          <image :src="item.icon" mode="aspectFit" class="card-icon"></image>
        </view>
      </view>
    </view>

    <!-- 专业课题库区域 -->
    <view class="section">
      <view class="section-title">
        <text class="title-icon">▼</text>
        <text class="title-text">专业课题库</text>
      </view>
      <view class="card-grid">
        <view v-for="(item, index) in professionalCourses" 
              :key="index" 
              class="card" 
              :style="{ backgroundColor: item.bgColor }" 
              @tap="handleCard(item)">
          <view class="card-content">
            <text class="card-title">{{ item.title }}</text>
            <text class="card-desc">{{ item.desc }}</text>
          </view>
          <image :src="item.icon" mode="aspectFit" class="card-icon"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 搜索相关
const searchValue = ref('')
const handleSearch = (e) => {
  console.log('搜索：', searchValue.value)
}
const handleSearchInput = (e) => {
  searchValue.value = e
}

// 公共课数据
// 公共课数据
const commonCourses = ref([
  { 
    title: '英语一题库',
    desc: '包含历年真题、词汇、阅读、写作等',
    bgColor: '#4C84FF',
    icon: '/static/icons/english.png',
    type: 'english1'
  },
  { 
    title: '英语二题库',
    desc: '专业硕士英语考试专用题库',
    bgColor: '#5C95FF',
    icon: '/static/icons/english.png',
    type: 'english2'
  },
  { 
    title: '政治题库',
    desc: '马原、毛中特、史纲、思修、时政',
    bgColor: '#FF6B6B',
    type: 'politics'
    // icon: '/static/icons/politics.png'
  },
  { 
    title: '数学一题库',
    desc: '高等数学、线性代数、概率统计',
    bgColor: '#4CAF50',
    icon: '/static/icons/math.png',
    type: 'math1'
  }
])

// 专业课数据
const professionalCourses = ref([
  { 
    title: '408计算机专业课',
    desc: '数据结构、操作系统、计网、组成原理',
    bgColor: '#FF9F43',
    icon: '/static/icons/computer.png'
  },
  { 
    title: '199管理类联考',
    desc: '写作、数学、逻辑、英语',
    bgColor: '#786FFF',
    icon: '/static/icons/management.png'
  }
])

/// 卡片点击处理 - 简化版本
const handleCard = (item) => {
  if (item.title === '数学一题库') {
    uni.navigateTo({
      url: '/pages/political/chapter'
    })
  } else if (item.type) {
    uni.navigateTo({
      url: `/pages/political/chapter?type=${item.type}`
    })
  } else {
    uni.showToast({
      title: `进入${item.title}`,
      icon: 'none'
    })
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-box {
  padding: 20rpx 0;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.section {
  margin-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
}

.title-icon {
  color: #333;
  margin-right: 10rpx;
  font-size: 24rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.card {
  padding: 30rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 160rpx;
}

.card-content {
  flex: 1;
  margin-right: 20rpx;
}

.card-title {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.card-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24rpx;
  display: block;
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
}
</style>